<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
         <div class="formContain">
           <div class="schemeLists" v-for="(item,index) in evaLists" :key="index">
               <div class="schemeList">
                   <p class="schemeName">{{item.evaType}}</p>
                   <div class="examPage">
                       <div v-for="orgLis in item.orgList" :key="orgLis.planOrgId">
                           <div class="schemePost">{{orgLis.orgName}}</div>
                           <div v-for="rankData in orgLis.planOrgDimList">
                               <div @click="goEvaGrade(item.evaType,orgLis.orgId,rankData.DIMENSION_ID)" v-if="rankData.EXECUTE_STATUS_VALUE =='未提交'">
                                   <p class="complete">{{rankData.DIMENSION_NAME}}
                                       <van-icon name="arrow" size="26" style="position: absolute;right: 0.2rem;top:.25rem;"/>
                                   </p>
                               </div>
                               <div v-else>
                                   <p class="unComplete">{{rankData.DIMENSION_NAME}}[已完成]</p>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>

         </div>
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
     import titlebar from '@/components/titlebar3/titlebar3';
    import {getSrlEvaType} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import { Dialog,Toast} from 'vant';
    export default {
    	data(){
            return{
                profiletitle:'选择考评方式',
                goBack:true,
                titleLeft:'',
                screenHeight:'',
	            planId:'',
                evaLists:[]
            }
        },
        created(){
	        this.planId = this.$store.state.planId;
	        var data = getDefault();
	        data.planId = this.planId;
	        data.userId = getStore('user_id');
	        getSrlEvaType(data).then(res=>{
		        console.log(res);
		        if(res.success == true){
			        var data = res.data;
			        this.evaLists = data;
                }else {

                }
	        });
        },
        mounted(){
          this.screenHeight = document.documentElement.clientHeight;

        },
        components:{
            headTop,
            titlebar
        },
      updated () {
        let that = this;
        this.$nextTick(function () {
          let $inputs = Array.from(document.getElementsByTagName('input'));
          /*let body = document.body;
          $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
              item.onblur = function () { // onblur是核心方法
                  clearTimeout(body.timer);
                  body.timer = setTimeout(() => {
                  window.scroll(0, 0);
                  window.innerHeight = window.outerHeight = that.screenHeight
                  }, 150)
              }
              item.onfocus = function () {
                  clearTimeout(body.timer)
              }
          })*/
          let body = document.body;
          $inputs.forEach(item => {
            item.onblur = function () { // onblur是核心方法
              window.scroll(0, 0);
              window.innerHeight = window.outerHeight = that.screenHeight;
              //console.log(that.screenHeight);
            }
          })
        })
      },
        methods:{
	        goEvaGrade(evaType,orgId,dimensionId){
		        this.$router.push({name: 'competencyGrade', params: { evaType: evaType,orgId:orgId,dimensionId:dimensionId}}
		        )
            }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../../assets/style/mixin';
    @import '../../../assets/style/public';

    .schemeList {
        margin: 0.4rem 0;
        background: #fff;
        padding: 0.2rem 0.4rem 0.4rem;
        .schemeName {
            color: #000;
            font-size: 0.8rem;
            font-weight: 500;
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
            &::after {
                content: '';
                position: absolute;
                left: 0.2rem;
                top: .18rem;
                background: #FEABAC;
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 0.1rem;
            }
        }
        .examPage {
            /*display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            flex-flow: wrap;*/
            .schemePost {
                padding-left: 3rem;
                font-size: 0.7rem;
                position: relative;
                margin-top: 0.5rem;
                &::after {
                    content: '';
                    position: absolute;
                    left: 1.6rem;
                    top: 0;
                    background: url('../../../assets/images/img/performance1.png') no-repeat center center;
                    background-size: 1rem;
                    width: 1rem;
                    height: 1rem;
                    border-radius: 0.1rem;
                }
            }
            .unComplete {
                width: 10rem;
                height: 1.5rem;
                line-height: 1.5rem;
                border: 1px solid #CBCBCB;
                text-align: center;
                color: #666666;
                font-size: 0.6rem;
                border-radius: 1rem;
                margin-top: 0.5rem;
                margin-left: 4rem;
                position: relative;
            }
            .complete {
                width: 10rem;
                height: 1.5rem;
                line-height: 1.5rem;
                text-align: center;
                border: 1px solid #E50010;
                color: #E50010;
                font-size: 0.6rem;
                border-radius: 1rem;
                margin-top: 0.5rem;
                margin-left: 4rem;
            }
        }
    }

</style>
